{% extends "layout.html" %}
{% block __data_browser__custom_external_block %}
  {{ super() }}
  <script type="text/javascript">
    function my_matcher(term, text) {
      return pinyin.getCamelChars(text).toUpperCase().indexOf(term.toUpperCase()) >= 0;
    }
    function calc_unit_weight() {
      var weight = $("input[name='weight']").val();
      var quantity = $("input[name='quantity']").val();
      if (weight.length && quantity != undefined && quantity.length) {
        return weight / quantity;
      } else {
        return null;
      }
    }

    function update_unit_weight() {
      var unit_weight = calc_unit_weight();
      var message = "({{ _("单位重量: ") }}";
      if (unit_weight != null) {
        message += unit_weight + " 公斤)";
        $("#unit_weight").text(message);
        $("#unit_weight").show();
      } else {
        $("#unit_weight").hide();
      }
    }

    $(function () {
      var products = {{ products|safe }};
      var selected_product_type = $("#product_type").val();
      $.each(products[selected_product_type], function (idx, entry) {
        $("#product").append('<option value="' + entry.id + '">' + entry.name + '</option>');
        $("#product").select2({width: "resolve", matcher: my_matcher});
      });
      $("#product_type").change(function (ui) {
        var selected_product_type = $("#product_type").val();
        $("#product").empty();
        $.each(products[selected_product_type], function (idx, entry) {
          $("#product").append("<option value=" + entry.id + ">" + entry.name + "</option>");
        });
        $("#product").select2({width: "resolve", matcher: my_matcher});
      });

      $("input[name='weight']").focusout(update_unit_weight);
      $("input[name='quantity']").focusout(update_unit_weight);
      update_unit_weight();
      $("input[name='due_time']").attr("min", new Date().toJSON().substr(0, 10));
      $("form").submit(function () {
        if ($("#product").text().trim() == "{{ DEFAULT_PRODUCT_NAME }}" || $("#product-type").text().trim() == "{{ DEFAULT_PRODUCT_NAME }}") {
          alert("产品及产品类型不能选择为默认加工件");
          return false;
        }
      });
      $("#due_time").datetimepicker('setStartDate', new Date().toJSON().substr(0, 10));
    });
  </script>
{% endblock %}
{% block body %}
  <div class="container">
    <p class="text-info">
      {{ _("本订单收货重量为") }}: {{ order.goods_receipt.goods_receipt_entries|sum(attribute="weight") }}公斤,
      {{ _("已创建子订单合计重量为") }}: {{ order.sub_order_list|sum(attribute="weight") }}公斤
    </p>

    <form class="form-horizontal" action="{{ url_for('order.new_sub_order') }}" method="POST">
      <div class="form-group">
        <label for="harbor" class="control-label col-lg-2">卸货点&nbsp;<span class="required">*</span></label>

        <div class="col-lg-3">
          <select name="harbor" id="harbor" required="required" class="form-control">
            {% for harbor in harbor_list %}
              <option value="{{ harbor.name }}">{{ harbor.name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-lg-2" for="product_type">产品类型&nbsp;<span class="required">*</span></label>

        <div class="col-lg-3">
          <select id="product_type" name="product_type" required="required" class="form-control">
            {% for t in product_types %}
              <option value="{{ t.id }}">
                {{ t.name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-lg-2" for="product">产品名称&nbsp;<span class="required">*</span></label>

        <div class="col-lg-3">
          <select name="product" id="product" required="required" class="form-control">
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-lg-2" for="due_time">交货日期&nbsp;<span class="required">*</span></label>

        <div class="col-lg-3">
          <input name="due_time" id="due_time" type="text" required="required" class="form-control" data-role="datepicker"/>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-lg-2" for="weight">净重(公斤)&nbsp;<span class="required">*</span></label>

        <div class="col-lg-3">
          <input name="weight" type="number" required="required" id="weight" class="form-control"/>
        </div>
      </div>
      <div class="form-group">
        <label for="quantity" class="control-label col-lg-2">数量&nbsp;<span class="required">*</span></label>

        <div class="col-lg-3">
          <input id="quantity" name="quantity" type="number" min="1" required="required" class="form-control"/>
        </div>
      </div>
      <div class="form-group">
        <label for="unit" class="control-label col-lg-2">数量单位&nbsp;<span class="required">*</span></label>

        <div class="col-lg-3">
          <input name="unit" type="text" id="unit" required="required" class="form-control"/>
          <span id="unit_weight" class="help-block"></span>
        </div>
      </div>

      <div class="form-group">
        <label class="control-label col-lg-2" for="spec">规格</label>

        <div class="col-lg-3">
          <input type="text" name="spec" id="spec" class="form-control"/>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-lg-2" for="type">型号</label>

        <div class="col-lg-3">
          <input type="text" name="type" id="type" class="form-control"/>
        </div>
      </div>

      <div class="form-group">
        <label class="control-label col-lg-2" for="tech_req">技术要求</label>

        <div class="col-lg-3">
          <input name="tech_req" size="10" type="text" id="tech_req" class="form-control"/>
        </div>
      </div>
      <div class="form-group">
        <label for="urgent-input" class="control-label col-lg-2">加急</label>

        <div class="col-lg-3">
          <div class="checkbox">
            <input name="urgent" id="urgent-input" type="checkbox"/>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="returned-input" class="control-label col-lg-2">退镀</label>

        <div class="col-lg-3">
          <div class="checkbox">
            <input name="returned" id="returned-input" type="checkbox"/>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-lg-3 col-lg-offset-2">
          <button class="btn btn-lg btn-primary">
            <i class="fa fa-check fa-fw"></i>提交
          </button>
          <a class="btn btn-lg btn-default" href="{{ request.args.get("url") or url_for("order.order",id_=order.id) }}">
            <i class="fa fa-step-backward fa-fw"></i>返回
          </a>
        </div>
      </div>
      <input type="hidden" name="order_id" value="{{ order.id }}">
    </form>
  </div>
  </div>

{% endblock %}
